---
title: Components
description: Check out these awesome components!
---

## Components

Explore our complete collection of 8-bit styled components. Each component is fully customizable and follows modern React patterns.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
  <a href="/docs/components/accordion" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Accordion</h4>
    <p className="text-sm text-muted-foreground">Expandable content sections</p>
  </a>
  <a href="/docs/components/alert" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Alert</h4>
    <p className="text-sm text-muted-foreground">Contextual feedback messages</p>
  </a>
  <a href="/docs/components/alert-dialog" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Alert Dialog</h4>
    <p className="text-sm text-muted-foreground">Modal confirmation dialogs</p>
  </a>
  <a href="/docs/components/avatar" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Avatar</h4>
    <p className="text-sm text-muted-foreground">User profile images</p>
  </a>
  <a href="/docs/components/badge" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Badge</h4>
    <p className="text-sm text-muted-foreground">Status indicators and labels</p>
  </a>
  <a href="/docs/components/breadcrumb" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Breadcrumb</h4>
    <p className="text-sm text-muted-foreground">Navigation path indicators</p>
  </a>
  <a href="/docs/components/button" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Button</h4>
    <p className="text-sm text-muted-foreground">Clickable buttons with pixel borders</p>
  </a>
  <a href="/docs/components/calendar" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Calendar</h4>
    <p className="text-sm text-muted-foreground">Date selection calendars</p>
  </a>
  <a href="/docs/components/card" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Card</h4>
    <p className="text-sm text-muted-foreground">Content containers with headers</p>
  </a>
  <a href="/docs/components/carousel" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Carousel</h4>
    <p className="text-sm text-muted-foreground">Image and content sliders</p>
  </a>
  <a href="/docs/components/chart" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Chart</h4>
    <p className="text-sm text-muted-foreground">Data visualization charts</p>
  </a>
  <a href="/docs/components/checkbox" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Checkbox</h4>
    <p className="text-sm text-muted-foreground">Pixel-perfect checkboxes</p>
  </a>
  <a href="/docs/components/collapsible" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Collapsible</h4>
    <p className="text-sm text-muted-foreground">Show/hide content areas</p>
  </a>
  <a href="/docs/components/combo-box" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Combo Box</h4>
    <p className="text-sm text-muted-foreground">Searchable select inputs</p>
  </a>
  <a href="/docs/components/command" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Command</h4>
    <p className="text-sm text-muted-foreground">Command palette interface</p>
  </a>
  <a href="/docs/components/context-menu" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Context Menu</h4>
    <p className="text-sm text-muted-foreground">Right-click menus</p>
  </a>
  <a href="/docs/components/date-picker" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Date Picker</h4>
    <p className="text-sm text-muted-foreground">Date selection interface</p>
  </a>
  <a href="/docs/components/dialog" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Dialog</h4>
    <p className="text-sm text-muted-foreground">Modal dialog windows</p>
  </a>
  <a href="/docs/components/drawer" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Drawer</h4>
    <p className="text-sm text-muted-foreground">Slide-out panel containers</p>
  </a>
  <a href="/docs/components/dropdown-menu" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Dropdown Menu</h4>
    <p className="text-sm text-muted-foreground">Contextual dropdown menus</p>
  </a>
  <a href="/docs/components/empty" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Empty</h4>
    <p className="text-sm text-muted-foreground">Empty state placeholders</p>
  </a>
  <a href="/docs/components/enemy-health-display" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Enemy Health Display</h4>
    <p className="text-sm text-muted-foreground">Boss and enemy health UI</p>
  </a>
  <a href="/docs/components/health-bar" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Health Bar</h4>
    <p className="text-sm text-muted-foreground">Player health indicators</p>
  </a>
  <a href="/docs/components/hover-card" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Hover Card</h4>
    <p className="text-sm text-muted-foreground">Preview cards on hover</p>
  </a>
  <a href="/docs/components/input" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Input</h4>
    <p className="text-sm text-muted-foreground">Text input fields with retro styling</p>
  </a>
  <a href="/docs/components/input-otp" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Input OTP</h4>
    <p className="text-sm text-muted-foreground">One-time password inputs</p>
  </a>
  <a href="/docs/components/item" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Item</h4>
    <p className="text-sm text-muted-foreground">Inventory item slots</p>
  </a>
  <a href="/docs/components/kbd" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Kbd</h4>
    <p className="text-sm text-muted-foreground">Keyboard key indicators</p>
  </a>
  <a href="/docs/components/label" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Label</h4>
    <p className="text-sm text-muted-foreground">Accessible form labels</p>
  </a>
  <a href="/docs/components/mana-bar" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Mana Bar</h4>
    <p className="text-sm text-muted-foreground">Magic/resource bars</p>
  </a>
  <a href="/docs/components/menubar" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Menubar</h4>
    <p className="text-sm text-muted-foreground">Horizontal menu bars</p>
  </a>
  <a href="/docs/components/navigation-menu" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Navigation Menu</h4>
    <p className="text-sm text-muted-foreground">Main site navigation</p>
  </a>
  <a href="/docs/components/pagination" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Pagination</h4>
    <p className="text-sm text-muted-foreground">Page navigation controls</p>
  </a>
  <a href="/docs/components/popover" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Popover</h4>
    <p className="text-sm text-muted-foreground">Floating content containers</p>
  </a>
  <a href="/docs/components/progress" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Progress</h4>
    <p className="text-sm text-muted-foreground">Progress bars and indicators</p>
  </a>
  <a href="/docs/components/radio-group" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Radio Group</h4>
    <p className="text-sm text-muted-foreground">Single-select option groups</p>
  </a>
  <a href="/docs/components/resizable" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Resizable</h4>
    <p className="text-sm text-muted-foreground">Resizable panel layouts</p>
  </a>
  <a href="/docs/components/retro-mode-switcher" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Retro Mode Switcher</h4>
    <p className="text-sm text-muted-foreground">Toggle retro visual effects</p>
  </a>
  <a href="/docs/components/scroll-area" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Scroll Area</h4>
    <p className="text-sm text-muted-foreground">Custom scrollable regions</p>
  </a>
  <a href="/docs/components/select" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Select</h4>
    <p className="text-sm text-muted-foreground">Dropdown selection menus</p>
  </a>
  <a href="/docs/components/separator" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Separator</h4>
    <p className="text-sm text-muted-foreground">Visual dividers for content</p>
  </a>
  <a href="/docs/components/sheet" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Sheet</h4>
    <p className="text-sm text-muted-foreground">Side panel overlays</p>
  </a>
  <a href="/docs/components/sidebar" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Sidebar</h4>
    <p className="text-sm text-muted-foreground">Collapsible side navigation</p>
  </a>
  <a href="/docs/components/skeleton" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Skeleton</h4>
    <p className="text-sm text-muted-foreground">Loading placeholder animations</p>
  </a>
  <a href="/docs/components/slider" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Slider</h4>
    <p className="text-sm text-muted-foreground">Range sliders for value selection</p>
  </a>
  <a href="/docs/components/spinner" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Spinner</h4>
    <p className="text-sm text-muted-foreground">Loading spinners</p>
  </a>
  <a href="/docs/components/switch" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Switch</h4>
    <p className="text-sm text-muted-foreground">Toggle switches with animations</p>
  </a>
  <a href="/docs/components/table" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Table</h4>
    <p className="text-sm text-muted-foreground">Data tables with sorting</p>
  </a>
  <a href="/docs/components/tabs" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Tabs</h4>
    <p className="text-sm text-muted-foreground">Tabbed content sections</p>
  </a>
  <a href="/docs/components/textarea" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Textarea</h4>
    <p className="text-sm text-muted-foreground">Multi-line text input areas</p>
  </a>
  <a href="/docs/components/theme-selector" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Theme Selector</h4>
    <p className="text-sm text-muted-foreground">Switch between retro themes</p>
  </a>
  <a href="/docs/components/toast" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Toast</h4>
    <p className="text-sm text-muted-foreground">Brief notification messages</p>
  </a>
  <a href="/docs/components/toggle" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Toggle</h4>
    <p className="text-sm text-muted-foreground">Two-state toggle buttons</p>
  </a>
  <a href="/docs/components/toggle-group" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Toggle Group</h4>
    <p className="text-sm text-muted-foreground">Group of toggle buttons</p>
  </a>
  <a href="/docs/components/tooltip" className="block p-4 border-2 border-border hover:border-primary hover:bg-accent/50 transition-colors">
    <h4 className="font-bold mb-1">Tooltip</h4>
    <p className="text-sm text-muted-foreground">Hover information popups</p>
  </a>
</div>

---

## Need Help?

We're here to help you get started with 8bitcn/ui.

- [GitHub Repository](https://github.com/TheOrcDev/8bitcn-ui)
- [Contributors](/contributors)
